<template>
  <div class="" v-if="state !== 'hidden'">

    <el-form ref="form" :model="form" :label-width="'write' == state ? '115px':'auto'"
             :class="'write' == state ? 'write-form':'read-form'"
             :label-position="'write' == state ? 'top':'left'">
      <div class="card-wrap flex-column justify-end card-padding">
        <div class="card-title-wrap">
          <span><span v-if="'write' == state" class="require-text">* </span>账户信息</span>
          <el-button v-if="'write' == state" style="margin-left: 20px" @click="addAccount" size="mini"
                     type="primary">新增
          </el-button>
          <span></span>
        </div>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-table
                border
                :data="form.accounts"
                style="width: 100%">
              <el-table-column
                  type="index"
                  key="index"
                  width="50"
                  align="center"
                  label="序号">
              </el-table-column>
              <el-table-column
                  prop="accountName"
                  key="accountName"
                  align="center"
                  min-width="170"
                  label="开户名称">
                <template slot-scope="scope">
                  <el-form-item label-width="0" prop="accountName"
                                :rules="'write' == state ? {
                                                             required: true,
                                                             message: '请输入开户名称',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, scope.row.accountName, callback)
                                                           }:{}">
                    <el-input maxlength="50" v-if="'write' == state" v-model="scope.row.accountName" clearable
                              placeholder="请输入开户名称"></el-input>
                    <span v-else>{{ scope.row.accountName|filterNull }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                  prop="bankName"
                  key="bankName"
                  align="center"
                  min-width="170"
                  label="开户银行">
                <template slot-scope="scope">
                  <el-form-item label-width="0" prop="bankName"
                                :rules="'write' == state ? {
                                                             required: true,
                                                             message: '请选择开户银行',
                                                             trigger: 'change',
                                                             validator: (rule, value, callback) => validData(rule, scope.row.bankName, callback)
                                                           }:{}">
                    <!--                    <el-select v-if="'write' == state" v-model="scope.row.bankName"-->
                    <!--                               filterable-->
                    <!--                               @change="handleSelect(scope.row,'bankName',scope.$index,)"-->
                    <!--                               clearable placeholder="请选择开户银行">-->
                    <!--                      <el-option label="1" value="1"/>-->
                    <!--                    </el-select>-->
                    <el-input
                        v-if="'write' == state"
                        @focus="select_dialog(scope.row,scope.$index)"
                        v-model="scope.row.bankName"
                        ref="selectDialogInput"
                        clearable
                        @clear="clear(scope.row)"
                        placeholder="请选择开户银行"/>

                    <span v-else>{{ scope.row.bankName|filterNull }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                  prop="accountNumber"
                  key="accountNumber"
                  align="center"
                  min-width="170"
                  label="银行账户">
                <template slot-scope="scope">
                  <el-form-item label-width="0" prop="accountNumber"
                                :rules="'write' == state ? {
                                                             required: true,
                                                             message: '请输入银行账户',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, scope.row.accountNumber, callback)
                                                           }:{}">
                    <el-input maxlength="30" @input="value=>scope.row.accountNumber=value.replace(/[^\d]/g,'')"
                              v-if="'write' == state" v-model="scope.row.accountNumber" clearable
                              placeholder="请输入银行账户"></el-input>
                    <span v-else>{{ scope.row.accountNumber|filterNull }}</span>
                  </el-form-item>

                </template>
              </el-table-column>
              <el-table-column
                  prop="accountStatus"
                  key="accountStatus"
                  align="center"
                  width="125"
                  label="是否为生效账号">
                <template slot-scope="scope">
                  <el-switch v-if="'write' == state"
                             active-value="0"
                             inactive-value="1"
                             v-model="scope.row.accountStatus">
                  </el-switch>
                  <span
                      v-else>{{
                      0 == scope.row.accountStatus ? '是' : 1 == scope.row.accountStatus ? '否' : '--'
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="'write' == state" label="操作" width="80" align="center"
                               class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <e-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row, scope.$index)"
                  >删除
                  </e-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" prop="memo"
                          :rules="('write' == state && '供应商变更'===pageType) ? {
                                                             required: true,
                                                             message: '请填写变更内容',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, form.memo, callback)
                                                           }:{}">
              <el-input type="textarea" v-if="'write' == state" v-model="form.memo" maxlength="500"
                        placeholder="请填写变更内容"></el-input>
              <span v-else>{{ form.memo|filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="1==form.delStatus">
            <el-form-item label="删除备注:" prop="delRemark">
              <el-input type="textarea" v-if="'write' == state" v-model="form.delRemark" maxlength="500"
                        placeholder="请填写删除备注"></el-input>
              <span v-else>{{ form.delRemark|filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件上传:" prop="annex">
              <ImageCommon :disabled="'write' != state" :up-type="2" info="选择附件"
                           v-model="form.annex"></ImageCommon>
            </el-form-item>
          </el-col>

        </el-row>
      </div>

    </el-form>

  </div>
</template>

<script>

export default {
  dicts: [],
  props: {
    value: {
      default: {},
    },
    state: {
      default: "write",
    },
    pageType: {
      default: "",
    },
  },
  computed: {
    form: {
      get() {
        console.log('this.value1', this.value)
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },

  },
  data() {
    return {};
  },
  methods: {
    select_dialog(row, index) {
      this.$refs.selectDialogInput.blur();
      const SelectDialog =
          require('../../../../components/A/A-form/template/index').default;

      SelectDialog({type: 'bank'})
          .then(({data, type}) => {
            const exists = this.form.accounts.some((item, ind) => item.bankCode === data.bankCode && index !== ind);
            if (exists) {
              this.$message({
                type: 'warning',
                message: '开户银行已存在'
              })
              row.bankName = '';
              row.bankCode = '';
            } else {
              row.bankName = data.bankName;
              row.bankCode = data.bankCode;
            }
          })
          .catch(err => {
          });
    },

    clear(row) {
      row.bankName = undefined;
      row.bankCode = undefined;
    },

    //开户银行事件
    handleSelect(row, key, index) {
      const exists = this.form.accounts.some((item, ind) => item[key] === row[key] && index !== ind);
      if (exists) {
        this.$message({
          type: 'warning',
          message: '开户银行已存在'
        })
        this.$set(this.form.accounts[index], key, '')
      } else {
        this.$set(this.form.accounts[index], key, row[key])
      }
    },

    handleDelete(row, index) {
      this.form.accounts.splice(index, 1)

    },
    addAccount() {
      this.form.accounts.push({
        bankName: null,
        bankCode:null,
        accountName: null,
        accountNumber: null,
        accountStatus: '0',
      })
      this.$forceUpdate()
    },
    validData(rule, value, callback) {
      // console.log('aaa', rule, value, callback)
      if (rule.required && !value) {
        // this.$modal.msgError(`未填写${value}`);
        callback(new Error(rule.message));
      } else {
        callback();
      }
    },


    async valid() {
      let that = this
      // this.form.workId = this.form.id
      return new Promise((resolve) => {
        if ('write' == this.state) {
          this.$refs["form"].validate(valid => {
            if (that.form.accounts.length > 0) {
              resolve(valid);
            } else {
              that.$modal.msgError("请填写账户信息")
              resolve(false)
            }


          });
        } else {
          resolve(true)
        }
      })
    },
  }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
  margin-left: 0 !important;
}

.el-descriptions {
  margin: 0 -15px;
}

.el-form-item {
  margin: 15px 0;
  width: 100%;
}

.el-table--small .el-table__cell {
  padding: 5px 0;
}
</style>
